<template>
    <div>
        <div>
            <div class="scroll_title">推荐歌单></div>
            <div class="songlistbox">
                <div class="singlesonglist" v-for="item in showsonglist" @click="getsongsheetid(item.id)">
                    <img :src="item.picUrl" class="listimg">
                    <span class="playcount"><van-icon name="play" />{{ cal(item.playCount) }}</span>
                    <div>{{ item.name }}</div>
                </div>
            </div>
        </div>
        <div class="scroll_Wk">
            <div class="scroll_title">每日推点好音乐</div>

            <van-swipe :loop="false" :width="320" :show-indicators=false>
                <van-swipe-item v-for='item in showmusic'>
                    <div v-for="ele in item" class="scroll_line"  @click="getmusicid(ele.id)">
                        <img :src="ele.picUrl" class="musicimg">
                        <div>
                            <div class="line_name">{{ ele.name }}</div>
                            <div class="line_ar">{{ ele.song.artists[0].name }}</div>
                        </div>

                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="scroll_Wk">
            <div class="scroll_title">排行榜</div>
            <div>
                <van-swipe class="card" :loop="false" :show-indicators='false'>
                    <van-swipe-item v-for="(item,index) in list">
                        <div class="scroll_title">{{ billboard[index].name }}</div>
                        <div v-for="(ele, index) in item" class="scroll_line" :key="index" @click="getmusicid(ele.id)">
                            <img :src="ele.al.picUrl" class="musicimg">
                            <div>{{ index + 1 }}</div>
                            <div>
                                <div class="line_name">{{ ele.name }}</div>
                                <div class="line_ar">{{ ele.al.name }}</div>
                            </div>

                        </div>
                    </van-swipe-item>
                </van-swipe>
            </div>

        </div>



    </div>

</template>

<script setup>
import { recommendsonglist, recommendmusic } from '../../api/recommend.js'
import { sheetdetail } from '../../api/music_style';

import { ref, onMounted } from 'vue'
import store from '../../store';
import { useRouter, useRoute } from 'vue-router';

let showsonglist = ref([])
let showmusic = ref([])
let list = ref([])
let route = useRoute()
let router = useRouter()
let billboard = ref([{ id: 19723756, name: '飙升榜' }, { id: 5059661515, name: '云音乐民谣榜' }, { id: 3778678, name: '热歌榜' }, { id: 2884035, name: '原创榜' }])
const getrecommendsonglist = async () => {
    const length = 6
    let data = await recommendsonglist(length)
    showsonglist.value = data.result

}
const getrecommendmusic = async () => {
    let data = await recommendmusic()
    let arr1 = []; let arr2 = []; let arr3 = []; let arr4 = []
    data.result.forEach((item) => {
        if (0 <= data.result.indexOf(item) && data.result.indexOf(item) < 3) {
            arr1.push(item)
        } else if (3 <= data.result.indexOf(item) && data.result.indexOf(item) < 6) {
            arr2.push(item)
        } else if (6 <= data.result.indexOf(item) && data.result.indexOf(item) < 9) {
            arr3.push(item)
        } else {
            arr4.push(item)
        }
    })
    showmusic.value.push(arr1, arr2, arr3, arr4)
}

const getoneranking = async () => {
        //let data1 = await sheetdetail (5059642708)
        billboard.value.forEach(async (item) => {
            let data = await sheetdetail(item.id)
            data.playlist.tracks.length = 3
            // let list_one = []
            //  list_one.push(data.playlist.tracks)
            list.value.push(data.playlist.tracks)
        })
}
onMounted(() => {
    getrecommendsonglist()
    getrecommendmusic()
    getoneranking()
})

const cal = (number) => {
    if (number.toString().length == 8) {
        let numberstr = number.toString().substr(0, 4)
        return `${numberstr}万`
    }
}
const getmusicid = (id)=>{
    store.state.nowplay.id = id
    
   // router.push('/songplay')
}
const getsongsheetid = async(id)=>{
    router.push({
        path: '/sheetdetail',
        query:{
            ids:id
        }
    })
}
</script>

<style scoped>
.listimg {
    width: 125px;
    border-radius: 10px;
}

.musicimg {
    width: 60px;
    border-radius: 5px;
    border: 1px solid #F1F1F1;
}

.songlistbox {
    display: flex;
    overflow-x: auto;
    background-color: white;
    border: 1px solid #EEEEEE;

}

.singlesonglist {
    width: 150px;
    margin: 10px;
    font-size: 10px;
    position: relative;


}

.playcount {
    position: absolute;
    right: 10%;
    color: #FFFFFF;

}

.songlistbox::-webkit-scrollbar {
    width: 0 !important
}

.scroll_Wk {
    padding: 0 20px;
    border: 1px solid #EEEEEE;
    margin: 20px 0;
}

.scroll_line {
    margin: 10px;
    display: flex;
}

.line_name {
    margin: 0 10px;
}

.line_ar {
    color: #D6D8DA;
    margin: 5px 10px;
}

.scroll_title {
    margin: 10px;
    font-weight: bold;
    font-size: 18px;
}

.card {

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
    display: inline-flex;
    font-size: 14px;
    padding: 4px;
    width: 98%;
}
</style>